---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: ElevatedCard
description: ElevatedCard API.
---

import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
import SlintProperty from '/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { ElevatedCard } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 200px;
    background: transparent;
    ElevatedCard {
        width: 200px;
        height: 150px;
        clickable: true;
    }
}
```
</CodeSnippetMD>

An `ElevatedCard` is a card component with elevation that appears to float above the surface. It's used to group related content and actions together.

## Properties

### clickable
<SlintProperty propName="clickable" typeName="bool">
Whether the card can be clicked and will respond to click events.
</SlintProperty>

## Callbacks

### clicked()
Invoked when the card is clicked (only if `clickable` is true).
